<template>
	<div class="prof_container">
		<div class="prof_bg">
			<img src="../../assets/professorBg.png">
		</div>
		<div class="prof_list_container" v-loading="isLoad">
			<div class="prof_title"><h3>专家</h3></div>
			<div class="prof_list">
				<profCard :item="item" class="prof_card"  v-for="item in profs":key="item.id"/>
			</div>
		</div>
	</div>
</template>
<script>
	import profCard from '@/widget/Card/profCard';
	export default {
		name: 'EmailProfList',
		components: {
			profCard
		},
		data(){
			return {
				profs:[],
				isLoad: true,
			}
		},
		methods:{
			getExperts: function(){
				this.$http({
				  method: 'get',
				  url: 'emoConsult/all'
				}).then((response)=>{
					this.isLoad = false;
				    if(response.data && response.data.status === 'SUCCESS'){
						const { object } = response.data;
						this.profs = object.objects;
				    }
				})
				.catch(function (error) {
				   console.log(error);
				});
			}
		},
		created: function() {
			this.getExperts();
		}
	}
</script>
<style scoped>
	.prof_container {
		padding: 10px 150px;
		margin: 10px auto;
	}
	.prof_list{
		display: flex;
		flex-wrap:wrap;
		
	}
	.prof_title {
	    text-align: center;
	    border-bottom: 3px solid #E91E63;
	}
	.prof_bg img {
	    max-width: 100%;
	    width: 100%;
	    max-height: 400px;
	}
	.prof_card {
		margin: 20px;
		width: 20%;
	}
	.prof_card:hover {
		box-shadow: 2px 2px 12px rgba(0,0,0,.12);
		transition: box-shadow 0.15s;
	}
</style>